<template>
 <div class="title">
    <div class="content"><slot></slot></div>
    <div :class="['more', { white }]">更多</div>
 </div>
</template>

<script setup>
import { defineProps } from 'vue'

defineProps({
    white: {
        type: Boolean,
        default: false
    }
})

</script>

<style lang="scss" scoped>
.title {
    display: flex;
    justify-content:space-between;
    font-size: 16px;
    color: white;
    padding: 0 20px 0 12px;
    align-items: center;
    .more {
        font-size: 12px;
        position: relative;
        color:#999;
        &.white {
            color:#fff;
            &::after {
                border-right: 1px solid #fff;
                border-top: 1px solid #fff;
            }            
        }
        &::after {
            position: absolute;
            content: '';
            width: 5px;
            height: 5px;
            border-right: 1px solid #999;
            border-top: 1px solid #999;
            transform: rotate(45deg) translate(0, -50%);
            top:48%;
            right: -8px;
        }
    }
}    
</style>